<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="180px" label-position="" size="default">
    <el-row>
      <el-col :span="12">
        <el-form-item label="建设单位" prop="vehicleNum" class="singerH" >
          <el-input v-model.trim="ruleForm.vehicleNum" placeholder="请输入车辆号码" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="行业类型" prop="contactPersonName" class="singerH">
          <el-input v-model.trim="ruleForm.contactPersonName" placeholder="请输入负责人" clearable></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="建设地址" prop="vehicleType" :rules="rules.vehicleType">
          <el-select v-model="ruleForm.vehicleType" placeholder="请选择车辆类型">
            <el-option v-for="item in commonConst.vehicleTypeList" :label="item.value" :value="item.value"
              :key="item.key"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所属单位" prop="workUnit">
          <el-input v-model.trim="ruleForm.workUnit" placeholder="请输入所属单位" clearable></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item :label="'项目名称及规模\n(以立项名称为准)'" class="fold_label" prop="vehicleType" :rules="rules.vehicleType">
          <el-select v-model="ruleForm.vehicleType" placeholder="请选择车辆类型">
            <el-option v-for="item in commonConst.vehicleTypeList" :label="item.value" :value="item.value"
              :key="item.key"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="项目类别" prop="workUnit">
          <el-input v-model.trim="ruleForm.workUnit" placeholder="请输入所属单位" clearable></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="建设开始日期" prop="vehicleType" :rules="rules.vehicleType">
          <el-select v-model="ruleForm.vehicleType" placeholder="请选择车辆类型">
            <el-option v-for="item in commonConst.vehicleTypeList" :label="item.value" :value="item.value"
              :key="item.key"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="建设结束日期" prop="workUnit">
          <el-input v-model.trim="ruleForm.workUnit" placeholder="请输入所属单位" clearable></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="项目状态" prop="vehicleType" :rules="rules.vehicleType">
          <el-select v-model="ruleForm.vehicleType" placeholder="请选择车辆类型">
            <el-option v-for="item in commonConst.vehicleTypeList" :label="item.value" :value="item.value"
              :key="item.key"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="总投资(万元)" prop="workUnit">
          <el-input v-model.trim="ruleForm.workUnit" placeholder="请输入所属单位" clearable></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item :label="'拟报审批、核准或\n备案的投资主管部门'" class="fold_label"  prop="vehicleType" :rules="rules.vehicleType">
          <el-select v-model="ruleForm.vehicleType" placeholder="请选择车辆类型">
            <el-option v-for="item in commonConst.vehicleTypeList" :label="item.value" :value="item.value"
              :key="item.key"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="安全设施投入(万元)" prop="workUnit">
          <el-input v-model.trim="ruleForm.workUnit" placeholder="请输入所属单位" clearable></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item  label="项目负责人" prop="vehicleType" :rules="rules.vehicleType">
          <el-select v-model="ruleForm.vehicleType" placeholder="请选择车辆类型">
            <el-option v-for="item in commonConst.vehicleTypeList" :label="item.value" :value="item.value"
              :key="item.key"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="负责人联系电话" prop="workUnit">
          <el-input v-model.trim="ruleForm.workUnit" placeholder="请输入所属单位" clearable></el-input>
        </el-form-item>
      </el-col>
    </el-row>
   
   
   
    
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs, watch, getCurrentInstance } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import commonConst from "@/config/const.js";
import UploadImage from '@/components/upload/UploadImage.vue';
import { UP_LOAD_URL } from "@/config/index.js"

/**
 * 全局方法引入
 */
const global = getCurrentInstance().appContext.config.globalProperties;

interface RuleForm {
  id?: Number
  vehicleNum: string
  contactPersonName: string
  vehicleType: string
  workUnit: string
  contactPersonTel?: string
  unitAddress?: string
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  vehicleNum: '',
  contactPersonName: '',
  vehicleType: '',
  workUnit: '',
  contactPersonTel: '',
  unitAddress: '',
  enclosureImage: '',
})

const rules = reactive<FormRules>({
  vehicleNum: [
    { required: true, message: '请输入车辆号码', trigger: 'blur' }
  ],
  contactPersonName: [
    { required: true, message: '请输入负责人', trigger: 'blur' }
  ],
  vehicleType: [
    { required: true, message: '请选择车辆类型', trigger: 'blur' }
  ],
  workUnit: [
    { required: true, message: '请选择所属单位', trigger: 'blur' }
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let api = ''
      if(send.value.status === 'add'){
        api = 'addVehicle'
      }else{
        api = 'updateVehicle'
      }
      global.$api[api](ruleForm).then(({ data }) => {
        if (data.status === "OK") {
          if(send.value.status === 'add'){
            ElMessage.success('新增成功！');
          }else{
            ElMessage.success('变更成功！');
          }
        }
        resetForm(ruleFormRef.value);
        emits("clean", { info: {}, status: "" })
      })
      
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields();
  formEl.clearValidate();
}
/**
 * 父组件传给子组件的prop
 */
const props = defineProps({
  send: Object
})
const { send } = toRefs(props);

/**
 * 子组件触发父组件的方法
 */
const emits = defineEmits(['clean'])
const uploadFile = value => {
  ruleForm.enclosureImage = value;
}


</script>
<style  scoped>
/* 过于长的label分两行展示样式 */
:deep().fold_label .el-form-item__label  {
  white-space: pre-line;
  text-align-last: justify;
  text-align: justify;
  margin-top: -8px;
  line-height: 25px;
  text-justify: distribute-all-lines;
}
/* 其他label根据宽度自动撑开 */
.el-form-item__label {
  text-align-last: justify;
  text-align: justify;
  text-justify: distribute-all-lines;
}
</style>